<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字华容道</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="form center">
        <h3 class="center">数字华容道</h3>
        <label>列</label>
        <!-- type="number" 出来的却还是字符串 -->
        <input type="number" v-model="col" @change="col=parseInt(col)">
        <button @click="init">开始</button>
    </div>
    <div class="my-table" :style="table_style">
        <div 
        class="td" 
        :style="td_style" 
        v-for="(v,i) in list" 
        :class="{num:v?true:false}"
        @click="run(i,v)"
        >{{v}}</div>
    </div>
</div>   
</body>
</html>
<style>
#app{
    width:1000px;
    margin:0 auto;
}
@media (max-width: 1000px){
    #app{
        width:100%;
    }
}
.form{
    margin:2rem auto .5rem;
}
.center{
    text-align: center;
}
.my-table{
    margin:0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.td{
    border:1px solid #ddd;
    text-align: center;
    font-size:2rem;
    font-weight: bold;
    cursor: pointer;
}
.num{
    background:orange;
    color:white;
}
</style>
<script src="./static/js/vue.min.js"></script>
<script src="./static/js/fun.js"></script>
<script>
new Vue({
    el:"#app",
    data:{
        list:[],
        col:3,
        can_run:[],
        empty:-1,
        td_style:{
            width:0,
            height:0,
        },
        table_style:{
            width:0,
            height:0,
        },
        minw:0,
    },
    created(){
        var w=document.body.scrollWidth;
        var h=window.innerHeight-100;
        this.minw=Math.min(w,h,1000);
        console.log("minw",this.minw)
        this.init();
    },
    methods:{
        set_style(){
            var w2=this.minw/this.col+'px';
            this.td_style={
                width:w2,
                height:w2,
                'line-height':w2,
            }
            minw=this.minw+"px";
            this.table_style={
                width:minw,
                height:minw,
            }
        },
        init(){
            this.set_style();
            var len=this.col*this.col;
            this.list=[];
            for(var i=0;i<len;i++){
                var num=i<len-1?i+1:"";
                this.list.push(num);
            }
            this.empty=len-1;
            this.get_can_run();
            this.rand_run();
        },
        rand_run(){
            var len=Math.pow(this.col,4);
            for(var j=0;j<len;j++){
                var i=fun.array_one(this.can_run);
                this.run(i,this.list[i],"just_run")
            } 
        },
        get_can_run(){
            var i=parseInt(this.empty);
            var row=Math.floor(i/this.col);
            var col=i%this.col;
            var re=[];
            if(row>0){
                re.push(i-this.col);
            }
            if(row<this.col-1){
                re.push(i+this.col);
            }
            if(col>0){
                re.push(i-1);
            }
            if(col<this.col-1){
                re.push(i+1);
            }
            this.can_run=re;
        },
        run(i,v,is){
            if(v=="") return;
            if(fun.in_array(i,this.can_run)){
                this.list.splice(this.empty,1,v);
                this.list.splice(i,1,"");
                this.empty=i;
                this.get_can_run();
                if(is!=="just_run"){
                    this.is_finish();
                }
            }
        },
        is_finish(){
            var len=this.col*this.col;
            for(var i=0;i<len;i++){
                var num=i<len-1?i+1:"";
                if(this.list[i]!=num){
                    return;
                }
            }
            setTimeout(()=>{
                alert("恭喜过关");
            })
        }
    }
})    
</script>